<template>
  <div class="background">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main class="content">
        <el-carousel class="banner" trigger="click">
          <el-carousel-item v-for="(item,index) in banner" :key="index">
            <el-image :src="item.src" fit="fill" @click="goTo(item.href)"/>
          </el-carousel-item>
        </el-carousel>
        <br/>
        <JobListComponent></JobListComponent>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>

import Header from "@/components/home/Header.vue";
import JobListComponent from "@/components/home/JobListComponent.vue";
import imageSrc from '@/assets/求职反诈骗2.webp';
import imageSrc2 from '@/assets/求职反诈骗5.webp';
import {ref} from "vue";

const banner = ref([
  {
    src: imageSrc2,
    href: "https://baijiahao.baidu.com/s?id=1752724528645232412&wfr=spider&for=pc"
  },
  {
    src: imageSrc,
    href: "https://baijiahao.baidu.com/s?id=1764230547936809043&wfr=spider&for=pc"
  },
])

function goTo(href: string) {
  window.open(href)
}
</script>
<style scoped>
.banner {
  margin-top: 10px;
  height: 300px;
  border: #333333 1px solid;
}

.content {
  padding: 0 200px;
}
.background{
    background-image: url('@/assets/back.jpg');
    background-size: cover; /* 可选，使背景图自适应容器 */
    background-position: center; /* 可选，使背景图居中 */
}
</style>